<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<!DOCTYPE HTML>
<html>

<head>
    <title>注册</title>
    <!-- CSS -->
    <link rel="stylesheet" href="${path}/pet/home/css/animate.css">
    <link rel="stylesheet" href="${path}/pet/home/css/bootstrap.css">
    <link rel="stylesheet" href="${path}/pet/login/css/login-R.css">
    <!-- jQuery -->
    <script src="${path}/pet/home/js/jquery.min.js"></script>
    <script src="${path}/pet/home/js/mobile_tab.js"></script>
</head>

<body>
<div id="page">
    <div class="page-inner">
        <!-- 导航栏 -->
        <nav class="gtco-nav">
            <div class="gtco-container">
                <div class="row">
                    <div class="col-xs-8 text-right menu-1" style="width:1080px">
                        <ul>
                            <li><a href="${path}/home">首页</a></li>
                            <li><a href="${path}/chat">社交</a></li>
                            <li><a href="${path}/chat?role=kf">客服</a></li>
                            <li><a href="${path}/myAccount">我的</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>
        <header id="gtco-header" class="gtco-cover" role="banner" style="background-image:url(${path}/pet/login/images/C_1.jpg)">
            <div class="overlay"></div> <!-- 调节背景色的透明度 -->
            <div class="gtco-container">
                <div class="row">
                    <div class="col-md-12 col-md-offset-0 text-left">
                        <div class="row row-mt-15em">
                            <!-- 网页左侧的字 -->
                            <div class="col-md-7 mt-text animate-box header fadeInUp animated-fast" data-animate-effect="fadeInUp">
                                <span class="intro-text-small">宠物保险平台</span>
                                <h1>用心保护您的宠物</h1>
                            </div>
                            <div class="col-md-4 col-md-push-1  animate-box regist" data-animate-effect="fadeInRight">
                                <div class="form-wrap">
                                    <div class="tab-menu">
                                        <span>用户注册</span>
                                    </div>
                                    <div class="tab-content">
                                        <form action="#">
                                            <div class="row form-group">
                                                <div class="col-md-12">
                                                    <label for="username">用户名</label>
                                                    <input type="text" autocomplete="off" class="form-control" id="username" placeholder="请输入用户名">
                                                    <div id="username1" style="color: #FD3F31;display: none;">用户名不能为空</div>
                                                    <div id="username2" style="color: #FD3F31;display: none;">用户名已存在，请重新输入</div>
                                                    <div id="username3" style="color: #43C608;display: none;">用户名合格</div>
                                                </div>
                                            </div>
                                            <div class="row form-group">
                                                <div class="col-md-12">
                                                    <label for="password">密码</label>
                                                    <input type="password" autocomplete="off" class="form-control" id="password" placeholder="请输入密码">
                                                    <div id="pwd0" style="color: #FD3F31;display: none;">密码只能是6-20位</div>
                                                    <div id="pwd1" style="color: #FD3F31;display: none;">密码不能为空</div>
                                                    <div id="pwd2" style="color: #43C608;display: none;">密码合格</div>
                                                </div>
                                            </div>
                                            <div class="row form-group">
                                                <div class="col-md-12">
                                                    <label for="password">确认密码</label>
                                                    <input type="password" autocomplete="off" class="form-control" id="R_password" placeholder="请输入密码">
                                                    <div id="R_pwd1" style="color: #FD3F31;display: none;">两次密码不一致</div>
                                                    <div id="R_pwd2" style="color: #43C608;display: none;">两次密码一致</div>
                                                </div>
                                            </div>
                                            <div class="row form-group">
                                                <div class="col-md-12">
                                                    <label id="identifying">验证码</label>
                                                    <input type="text" autocomplete="off" class="form-control" id="input">
                                                    <input type="button" id="checkCode" class="code"/>
                                                    <label id="checkCode1" style="color: #777777;">看不清楚</label>
                                                    <div id="code1" style="display: none;color: #FD3F31;">请输入验证码！</div>
                                                    <div id="code2" style="display: none;color: #FD3F31;">验证码输入错误！</div>
                                                    <div id="code3" style="display: none;color: #43C608;">验证码正确！</div>
                                                </div>
                                            </div>
                                            <div class="row form-group">
                                                <div class="col-md-12" style="margin-bottom: -10px;">
                                                    <label>性别</label>
                                                    <input type="radio" name="sex" id="sex1" value="女性" checked>女
                                                    <input type="radio" name="sex" id="sex2" value="男性">男
                                                </div>
                                            </div>
                                            <div class="row form-group">
                                                <div class="create" id="code">
                                                    <a href="${path}/login">点击登录</a>
                                                    <span>已有账号?</span>
                                                </div>
                                            </div>
                                            <div class="row form-group">
                                                <div class="col-md-12">
                                                    <input id="regist" type="button" class="btn btn-primary" value="注册">
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
    </div>
</div>
</body>

<script type="text/javascript">
    $(function() {
        var all_judge="";
        var all_judge1="";
        var all_judge2="";
        var all_judge3="";

        var code; //在全局定义验证码
        code = "";
        var codeLength = 4; //验证码的长度
        var checkCode = document.getElementById("checkCode");
        var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');//随机数
        for (var i = 0; i < codeLength; i++) { //循环操作
            var charIndex = Math.floor(Math.random() * 36); //取得随机数的索引
            //令系统随机选取大于等于 0.0 且小于 1.0 的伪随机 double 值
            //floor() 返回数字的下舍整数。
            code += random[charIndex]; //根据索引取得随机数加到code上
        }
        checkCode.value = code; //把code值赋给验证码


        function createCode() {
            code = "";
            var codeLength = 4;
            var checkCode = document.getElementById("checkCode");
            var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
            for (var i = 0; i < codeLength; i++) {
                var charIndex = Math.floor(Math.random() * 36);
                code += random[charIndex];
            }
            checkCode.value = code;
        }
        $("#checkCode").click(function() {
            createCode();
        });
        $("#checkCode1").click(function() {
            createCode();
        });

        //验证验证码是否正确（all_judge）
        $("#input").blur(function() {
            var inputCode1 = document.getElementById("input").value;
            if (inputCode1.length <= 0) {
                $("#code1").show();
                $("#code2").hide();
                $("#code3").hide();
                all_judge = "请输入验证码！";
            } else {
                var inputCode = document.getElementById("input").value.toUpperCase();
                if (inputCode != code) {
                    $("#code2").show();
                    $("#code1").hide();
                    $("#code3").hide();
                    all_judge = "验证码输入错误！";
                    createCode();
                } else {
                    $("#code3").show();
                    $("#code1").hide();
                    $("#code2").hide();
                    all_judge = "验证码输入正确";
                }
            }
        });

        //失去焦点时，判断是否输入密码（all_judge1）
        $("#password").blur(function(){
//            var patrn = /^[a-zA-Z0-9]+$/;
            var pwd = $.trim($("#password").val());
            if (pwd.length < 6 || pwd.length > 20) {
                $("#pwd0").show();
                $("#pwd1").hide();
                $("#pwd2").hide();
                all_judge1 = "密码格式不正确";
                return false;
            } else if(pwd.length <= 0){
                $("#pwd0").hide();
                $("#pwd1").show();
                $("#pwd2").hide();
                all_judge1 = "密码不能为空";
            } else {
                $("#pwd0").hide();
                $("#pwd1").hide();
                $("#pwd2").show();
                all_judge1 = "密码输入正确";
                return true;
            }
        });

        //失去焦点时，判断两次密码是否一致（all_judge2）
        $("#R_password").blur(function(){
            var pwd = $.trim($("#password").val());
            var pwdAgain = $.trim($("#R_password").val());
            if(pwd == pwdAgain) {
                $("#R_pwd2").show();
                $("#R_pwd1").hide();
                all_judge2 = "两次密码一致";
            } else {
                $("#R_pwd1").show();
                $("#R_pwd2").hide();
                all_judge2 = "两次密码不一致";
            }
        });

        //失去焦点时，验证用户名是否存在（all_judge3）
        $("#username").blur(function(){
            var username = $.trim($("#username").val());
            $.ajax({
                url:"/user/registerUsernameCheck",
                type:"post",
                data:{username:username},
                error: function () {
                    console.log("失败");
                },
                success:function(data){
                    if(data.result=="用户名不能为空！"){
                        $("#username1").toggle();
                        $("#username2").hide();
                        $("#username3").hide();
                        all_judge = "用户名不能为空！";
                    } else if(data.result=="notsuccess") {
                        $("#username2").show();
                        $("#username1").hide();
                        $("#username3").hide();
                        all_judge3 = "用户名已存在，请重新输入";
                    } else if(data.result=="success"){
                        $("#username3").show();
                        $("#username2").hide();
                        $("#username1").hide();
                        all_judge3 = "用户名合格";
                    }
                }
            });
        });

        //注册新用户
        $("#regist").click(function () {
            var username = $.trim($("#username").val());
            var pwd = $.trim($("#password").val());
            var pwdAgain = $.trim($("#R_password").val());
            var verify_code = $.trim($("#input").val().toUpperCase());
            var sex = $.trim($("input:radio:checked").val());

            if(all_judge3 == "用户名已存在，请重新输入") {   //ok
                alert("用户名已存在，请重新输入");
            } else if(all_judge3 == "用户名长度过长，请重新输入") {   //ok
                alert("用户名已存在，请重新输入");
            } else if(all_judge1 == "密码格式不正确") {   //ok
                alert("密码格式不正确！");
            } else if(all_judge3 == "用户名不能为空！") {  //ok
                alert("用户名不能为空！");
            } else if(all_judge1 == "密码不能为空") {    //ok
                alert("密码不能为空！");
            } else if(all_judge2 == "两次密码不一致") {   //ok
                alert("两次密码不一致！");
            } else if(all_judge == "请输入验证码！") {  //ok
                alert("请输入验证码！");
            } else if(all_judge == "验证码输入错误！") {   //ok
                alert("验证码输入错误！");
            } else if(all_judge == "验证码输入正确" && all_judge1 == "密码输入正确" && all_judge2 == "两次密码一致" && all_judge3 == "用户名合格"){
                $.ajax({
                    type: 'POST',
                    url: '/user/regist',
                    dataType: "json",
                    data: {username: username, pwd: pwd, pwdAgain: pwdAgain, code: verify_code, originCode: code, sex: sex},
                    error: function () {
                        alert("失败");
                    },
                    success: function (result) {
                        if (result.msg == "不能有非空字段！") {
                            alert("不能有非空字段！");
                        } else if(result.msg == "验证码有误！") {
                            alert("验证码有误！");
                        }
                        else {
                            alert("注册成功！请登录");
                            window.location.href = '${path}/login';
                        }
                    }
                });
            }
        });
    });
</script>

<style>
    #input {
        width: 50%;
        display: inline-block;
    }
    .code {
        font-family: Arial;
        font-style: italic;
        font-weight: bold;
        border: 0;
        letter-spacing: 3px;
        color: blue;
    }
    #sex1 {
        margin-left: 20px;
    }
    #sex2 {
        margin-left: 20px;
    }
    @media screen and (max-width: 480px) {
        #sex1 {
            margin-left: -70px;
        }
        #sex2 {
            margin-left: 50px;
        }
        #code {
            margin-top: 10px;
        }
    }
    p.wrong {
        display: none;
    }

    p.wrong.shake {
        display: block;
    }

    p.wrong.shake {
        animation: shake .4s cubic-bezier(.36, .07, .19, .97) both;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        perspective: 1000px;
    }
    p.right {
        display: none;
    }

    p.right.shake {
        display: block;
    }

    p.right.shake {
        animation: shake .4s cubic-bezier(.36, .07, .19, .97) both;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        perspective: 1000px;
    }

    /*animate.css内的抖动效果shake*/
    @keyframes shake {
        10%,
        90% {
            transform: translate3d(-1px, 0, 0);
        }
        20%,
        80% {
            transform: translate3d(1px, 0, 0);
        }
        30%,
        50%,
        70% {
            transform: translate3d(-2px, 0, 0);
        }
        40%,
        60% {
            transform: translate3d(2px, 0, 0);
        }
    }

    .controls img {
        height: 20px;
    }

    .form-control {
        box-shadow: none;
        background: transparent;
        border: 2px solid rgba(0, 0, 0, 0.1);
        height: 46px;
        font-size: 16px;
        font-weight: 300;
        padding-left: 15px;
        padding-right: 15px;
    }
</style>

</html>

